<template>
  <div class="userList">
    <div class="top">
      <el-card>
        <el-form ref="form" :model="form" :inline="true">
          <el-form-item label="企业编号">
            <el-input v-model="form.text1" class="input" />
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="form.text2" />
          </el-form-item>
          <el-form-item label="创建者">
            <el-input v-model="form.text3" />
          </el-form-item>
          <el-form-item label="转态">
            <el-select v-model="form.data" placeholder="请选择状态" />
          </el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button>清除</el-button>
          <el-button
            style="padding-right: 18px"
            type="primary"
          >+新增企业</el-button>
        </el-form>
        <div class="button">
          <el-table :data="tableDatta" border style="width: 100%">
            <el-table-column fixed label="序号" prop="num" width="120" />
            <el-table-column label="企业编号" prop="serial" width="150" />
            <el-table-column label="企业名称" prop="username" width="150" />
            <el-table-column label="创建者" prop="creator" width="150" />
            <el-table-column label="创建日期" prop="data" width="300" />
            <el-table-column label="状态" prop="status" width="150" />
            <el-table-column fixed="right" label="操作" width="200">
              <template>
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">启用</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page.page"
            :page-sizes="[10, 100, 200, 400]"
            :page-size="page.size"
            :total="page.total"
            @size-change="SizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        text1: '',
        text2: '',
        text3: '',
        data: ''
      },
      tableDatta: [
        {
          num: 1,
          serial: 'QD001',
          username: '黑马程序员',
          creator: '刘洋洋',
          data: '2019-11-21',
          status: 1
        }
      ],
      page: {
        total: 100,
        size: 10,
        page: 1
      }
    }
  },
  methods: {
    SizeChange() {},
    pageChange() {}
  }
}
</script>

<style lang="scss" scoped>
.userList {
  .top {
    height: 103px;
    margin: 18px;
    .input {
      width: 110px;
    }
  }
  .button {
    display: flex;
    height: 283px;
    margin-top: 18px;
  }
  .block{
    display: flex;
    justify-content: center;
  }
}
</style>
